<%--
  Created by IntelliJ IDEA.
  User: 10171225
  Date: 2016/3/3
  Time: 12:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>个人主页</title>
    <script src="static/javascript/jquery-1.11.3.min.js"></script>
    <script src="static/javascript/utils.js"></script>
    <script src="static/javascript/base.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            function toggleBackgroundColor(tag){
                $("#tabs span").css("background-color","white");
                tag.css("background-color","blue");
            }
            function ajaxForPage(tag,url) {
                htmlobj=$.ajax({url:url,async:false});
                toggleBackgroundColor(tag);
                $("#personalContent").html(htmlobj.responseText);
            }
            $("#personalInfo").click(function () {
                ajaxForPage($(this),"user/personalInfo");
            });
            $("#editPassword").click(function () {
                toggleBackgroundColor($(this));
                $("#personalContent").load("views/editPassword.jsp");
            });
            $("#issuedArticles").click(function () {
                ajaxForPage($(this),"user/issuedArticles");
            });
            $("#commentedArticles").click(function () {
                ajaxForPage($(this),"user/commentedArticles");
            });
            var tab = '${tab}';
            if(tab != ''){
                $("#" + tab).click();
            } else {
                $("#personalInfo").click();
            }

        });
    </script>
</head>
<body>
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3">
            <table class="table-bordered" id="tabs">
                <tr><td><span id="personalInfo">个人信息</span></td></tr>
                <tr><td><span id="editPassword">密码修改</span></td></tr>
                <tr><td><span id="issuedArticles">查看发布文章</span></td></tr>
                <tr><td><span id="commentedArticles">查看已评论文章</span></td></tr>
            </table>
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9">
            <div id="personalContent"></div>
        </div>
    </div>
</body>
</html>
